<template>
  <section>
    <div style="margin-bottom:5px">
      <el-button type="primary" size="mini" @click="()=>triggerModify()">新增</el-button>
    </div>
    <el-table
        size="mini"
        border
        ref="multipleTable"
        :data="dataList"
        v-loading="loading"
        tooltip-effect="dark"
        style="width: 100%"
        @row-click="(row)=>{
                  tableRowClickOnece(row,'multipleTable')
                }">
      <el-table-column
          label="" prop="index" min-width="55" type="selection" align="center">
      </el-table-column>

      <el-table-column
          label="id" prop="id" min-width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row['id'] }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="name" prop="name" min-width="120" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row['name'] }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="desccontent" prop="desccontent" min-width="120" align="center">
        <template slot-scope="scope">
          <el-scrollbar  style="height: 66px;"

          >{{ scope.row['desccontent'] }}</el-scrollbar>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="scope">
          <el-popover
              placement="top-start"
              width="200"
              title="操作"
              trigger="hover"
          >
            <div>
              <el-button type="text" @click="()=>triggerModify(scope.row)">编辑</el-button>
              <el-button type="text" @click="()=>triggerDeleteRow(scope.row)">删除</el-button>
            </div>
            <el-button slot="reference" type="text">操作</el-button>

          </el-popover>
        </template>
      </el-table-column>

    </el-table>
  </section>

</template>
<script>
import useTable from '@/hooks/useTable';
import axios from 'axios';
import { formData, formMethod, PageData, uniqWithKey } from '@/utils/formcommon';
import { openLayer } from '@/utils/layerdialog/layerdialog';
import { alertConfirm, alertWithPayload } from '@base/utils';

export default {
  data() {
    const { tableRowClickOnece } = useTable();
    return {
      dataList: [],
      total: 0,
      ...formData,
      queryParams: {
        ...PageData,
      },
      tableRowClickOnece,
    };
  },
  mounted() {
    this.getInfoList();
  },
  methods: {
    ...formMethod,
    async getInfoList() {
      this.loading = true;
      var result = await axios.post('/api/tb_gerenrate_template/getlist', { ...this.queryParams }).then(res => res.data);
      this.dataList = result && result.data || [];
      this.total = result && result.count;
      this.loading = false;
    },
    async triggerDeleteRow(row) {
      await alertConfirm('确定删除吗？');
      var result = await axios.get('/api/tb_gerenrate_template/delbyid?id=${row?.id}').then(res => res.data);
      alertWithPayload(result);
      if (result?.success) {
        this.getInfoList();
      }
    },
    async triggerModify(row) {
      var result = await openLayer({
        title: '',
        width: '900px',
        data() {
          return { row };
        },
        components: {
          modify: () => import('./modify.vue'),
        },
      });
      if (result?.success) {
        this.getInfoList();
      }
    },
  },
};
</script>
